<template>
  <view class="container">
    <!-- 头部选项卡 -->
    <view class="header">
      <block v-for="item in headerItems" :key="item.id">
        <view :class="['header-item',{'header-item-active':item.id===active} ]" @click="switchItem(item.id)">
          {{item.text}}
        </view>
      </block>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 笔记内容 -->
      <view v-if="active === 0" class="notes-section">
        <view class="empty-tip" v-if="notes.length === 0 && !noteLoading">
          <image src="/static/404.png" mode="aspectFit" class="empty-img" />
          <text class="empty-text">暂无笔记，快去写一篇吧~</text>
        </view>
        <view class="note-list">
          <view v-for="(note, index) in notes" :key="note.id" class="note-item" @click="viewNoteInfo(note.id)">
            <!-- 用户信息 -->
            <view class="user-info">
              <image :src="note.author.avatar||defaultUrl" class="user-avatar" />
              <text class="user-name">{{note.author.nickname}}</text>
            </view>

            <!-- 图书信息 -->
            <view class="book-info">
              <image :src="note.book.cover" class="book-cover" />
              <view class="book-details">
                <view class="book-title">{{note.book.title}}</view>
                <view class="book-author">{{note.book.author}}</view>
              </view>
            </view>

            <!-- 笔记内容 -->
            <view class="note-title">{{note.title}}</view>
            <view class="note-content">{{note.content}}</view>
            <view class="note-footer">
              <text class="note-time">{{formatDate(note.createTime)}}</text>
              <text class="note-likes">❤️ {{note.likeCount}}</text>
            </view>
          </view>
        </view>

        <!-- 加载更多提示 -->
        <view class="load-more" v-if="notes.length > 0">
          <text v-if="noteLoading" class="loading-text">加载中...</text>
          <text v-else class="no-more-text">没有更多数据了</text>
        </view>
      </view>

      <!-- 书评内容 -->
      <view v-if="active === 1" class="reviews-section">
        <view class="empty-tip" v-if="reviews.length === 0 && !reviewLoading">
          <image src="/static/404.png" mode="aspectFit" class="empty-img" />
          <text class="empty-text">暂无书评，快去写一篇吧~</text>
        </view>

        <view class="review-list" v-else>
          <view v-for="(review, index) in reviews" :key="review.id" class="review-item"
            @click="viewReviewInfo(review.id)">
            <!-- 用户信息 -->
            <view class="user-info">
              <image :src="review.author.avatar||defaultUrl" class="user-avatar" />
              <text class="user-name">{{review.author.nickname}}</text>
            </view>
            <view class="book-info">
              <image :src="review.book.cover" class="book-cover" />
              <view class="book-details">
                <view class="book-title">{{review.book.title}}</view>
                <view class="book-author">{{review.book.author}}</view>
              </view>
            </view>
            <view class="review-content">{{review.content}}</view>
            <view class="review-footer">
              <text class="review-time">{{formatDate(review.createTime)}}</text>
              <block v-for="i in review.rating" :key="i">⭐</block>
            </view>
          </view>

          <!-- 加载更多提示 -->
          <view class="load-more" v-if="reviews.length > 0">
            <text v-if="reviewLoading" class="loading-text">加载中...</text>
            <text v-else class="no-more-text">没有更多数据了</text>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>


<script>
  export default {
    data() {
      return {
        defaultUrl: '/static/my.jpg',
        active: 0,
        headerItems: [{
            id: 0,
            text: '笔记'
          },
          {
            id: 1,
            text: '书评'
          }
        ],
        // 笔记相关数据
        notes: [],
        notePage: 1,
        noteSize: 10,
        noteTotal: 0,
        noteLoading: false,

        // 书评相关数据
        reviews: [],
        reviewPage: 1,
        reviewSize: 10,
        reviewTotal: 0,
        reviewLoading: false
      };
    },
    methods: {
      async fetchNotes() {
        if (this.noteLoading) return; // 如果正在加载，直接返回
        this.noteLoading = true;

        try {
          const {
            data
          } = await uni.$http.get("/note", {
            page: this.notePage,
            size: this.noteSize,
            status: 1
          });

          if (data.code !== 1) throw Error('获取笔记失败');

          this.notes = [...this.notes, ...data.data.records];
          this.noteTotal = data.data.total;
          this.notePage++;
        } catch (error) {
          console.error(error);
        } finally {
          this.noteLoading = false;
        }
      },
      async fetchReviews() {
        if (this.reviewLoading) return; // 如果正在加载，直接返回
        this.reviewLoading = true;

        try {
          const {
            data
          } = await uni.$http.get("/review", {
            page: this.reviewPage,
            size: this.reviewSize,
            status: 1
          });

          if (data.code !== 1) throw Error('获取书评失败');

          this.reviews = [...this.reviews, ...data.data.records];
          this.reviewTotal = data.data.total;
          this.reviewPage++;
        } catch (error) {
          console.error(error);
        } finally {
          this.reviewLoading = false;
        }
      },
      loadMoreNotes() {
        if (this.notePage * this.noteSize >= this.noteTotal) {
          return; // 如果已经加载完所有笔记，直接返回
        }
        this.fetchNotes();
      },
      loadMoreReviews() {
        if (this.reviewPage * this.reviewSize > this.reviewTotal) {
          return; // 如果已经加载完所有书评，直接返回
        }
        this.fetchReviews();
      },
      switchItem(id) {
        if (this.active === id) return;
        this.active = id
        // 清空数据并重置分页
        if (id === 0) {
          this.resetNotePagination();
          if (this.notes.length === 0) { // 只有在笔记为空时才加载数据
            this.fetchNotes();
          }
        } else if (id === 1) {
          this.resetReviewPagination();
          if (this.reviews.length === 0) { // 只有在书评为空时才加载数据
            this.fetchReviews();
          }
        }
      },

      resetNotePagination() {
        this.notePage = 1;
        this.noteTotal = 0;
        this.notes = [];
      },

      resetReviewPagination() {
        this.reviewPage = 1;
        this.reviewTotal = 0;
        this.reviews = [];
      },

      viewNoteInfo(id) {
        uni.navigateTo({
          url: `/subpkg/note_info/note_info?id=${id}`
        })
      },

      viewReviewInfo(id) {
        uni.navigateTo({
          url: `/subpkg/review_info/review_info?id=${id}`
        })
      },

      formatDate(dateString) {
        const date = new Date(dateString)
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
      }
    },
    onLoad() {
      this.fetchNotes();
      this.fetchReviews();
    },
    onReachBottom() {
      if (this.active === 0) {
        this.loadMoreNotes();
      } else if (this.active === 1) {
        this.loadMoreReviews();
      }
    }
  }
</script>
<style lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .header {
    background-color: #FFFFFF;
    display: flex;
    padding: 12px 10px;
    justify-content: space-evenly;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 999;

    .header-item {
      font-size: 16px;
      color: #666;
      padding: 5px 15px;

      &-active {
        font-weight: bold;
        color: #C00000;
        border-bottom: 4px solid #C00000;
      }
    }
  }

  .content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 8px;
      border: 1px solid #f0f0f0;
    }

    .user-name {
      font-size: 14px;
      color: #333;
    }
  }

  /* 笔记部分样式 */
  .notes-section {
    .note-list {
      .note-item {
        background-color: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .book-info {
          display: flex;
          margin-top: 8px;
          margin-bottom: 10px;
          align-items: center;
          padding: 8px;
          background-color: #f9f9f9;
          border-radius: 6px;

          .book-cover {
            width: 40px;
            height: 56px;
            border-radius: 3px;
            margin-right: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }

          .book-details {
            flex: 1;
            overflow: hidden;

            .book-title {
              font-size: 14px;
              font-weight: bold;
              color: #333;
              margin-bottom: 3px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 250px;
            }

            .book-author {
              font-size: 12px;
              color: #999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        /* 调整笔记标题的间距 */
        .note-title {
          margin-top: 8px;
        }

        .note-content {
          font-size: 14px;
          color: #666;
          margin-bottom: 10px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .note-footer {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #999;

          .note-likes {
            color: #C00000;
          }
        }
      }
    }

  }

  /* 书评部分样式 */
  .reviews-section {
    .review-list {
      .review-item {
        background-color: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .book-info {
          display: flex;
          margin-bottom: 10px;

          .book-cover {
            width: 50px;
            height: 70px;
            border-radius: 4px;
            margin-right: 10px;
          }

          .book-details {
            flex: 1;

            .book-title {
              font-size: 14px;
              font-weight: bold;
              color: #333;
              margin-bottom: 3px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 250px;
            }

            .book-author {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .review-content {
          font-size: 14px;
          color: #666;
          margin-bottom: 10px;
          line-height: 1.6;
        }

        .review-footer {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #999;

          .review-rating {
            color: #FFC107;
          }
        }
      }
    }
  }

  .empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;

    .empty-img {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
    }

    .empty-text {
      color: #999;
      margin-bottom: 20px;
    }
  }

  .load-more {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: #999;

    .loading-text {
      display: flex;
      justify-content: center;
      align-items: center;

      .load-more-text {
        color: #C00000;
      }

      .no-more-text {
        color: #999;
      }
    }

  }
</style>
